<template>
	<view>
		<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="80">
			<u-form-item label="选择月份" prop="month" borderBottom @click="showDate = true">
				<u-input v-model="form.month" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff"/>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="业绩目标" prop="targetAmount">
				<u-input v-model="form.targetAmount" type="number" border="none" placeholder="请填写目标金额" inputAlign="right"></u-input>
				<text slot="right">￥</text>
			</u-form-item>
		</u--form>
		<view class="padding-30">
			<u-button color="#e54d42" text="确定" @click="submit" size="large" />
		</view>
		<u-datetime-picker
			:show="showDate"
			v-model="value"
			mode="year-month"
			@cancel="showDate=false"
			@confirm="confirmDate"
		></u-datetime-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDate: false,
				value:'',
				form: {
					staffId:null,
					month: '',
					targetAmount: null,
				},
				rules: {
					month: [{
						required: true,
						message: '请选择月份',
						trigger: ['blur', 'change']
					}],
					targetAmount: [{
						required: true,
						message: '请填写目标金额',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(option) {
			this.form.staffId = option.id
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			confirmDate(e){
				this.showDate = false
				this.form.month = uni.$u.date(e.value, 'yyyy-mm')
				console.log(e)
			},
			submit() {
				let that = this;
				that.$refs.myForm.validate().then(res => {
					console.log(that.form)
					that.$reqJsonPost('StoreStaffDoSaleTarget', that.form).then(res=>{
						this.$refs.uToast.show({
							message: res.msg,
							complete() {
								uni.navigateBack()
							}
						})
					})
					
				})
			}
		},
	}
</script>
